<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
    <!-- 标签管理 -->
    <el-row :gutter="20" type="flex" justify="space-between">

       <!-- 左侧查询-->
       <el-col :span="5">
       <div class="grid-content bg-purple">
       <el-form ref="tagsform" :model="dataform" label-width="80px">
         <el-form-item label="标签名称">
         <el-input v-model="dataform.tagName"></el-input>
         </el-form-item>
         </el-form>
       </div>
       </el-col>
       <el-col :span="13">
       <div class="grid-content bg-purple">
       <el-form ref="tagsform" :model="dataform" label-width="80px" :inline="true">
         <el-form-item label="状态">
         <el-select v-model="dataform.state" placeholder="请选择" style="width: 100%;">
             <!-- 应该用枚举做 -->
         <el-option
         v-for="item in options"
         :key="item.label"
         :label="item.label"
         :value="item.value">
         </el-option>
         </el-select>
      </el-form-item>
      <el-form-item>
       <el-button @click="offsearch">清除</el-button>
       <el-button type="primary" @click="seachtags">搜索</el-button>
      </el-form-item>
      </el-form>
      </div>
      </el-col>
      <!-- 右侧新增目录 -->
    <el-col :span="6">
      <div class="grid-content bg-purple">
          <el-button type="text"  icon="el-icon-back" v-if="this.$route.query.id" @click="btnpush">返回学科</el-button>
          <el-button type="success" icon="el-icon-edit" @click="addtags">新增标签</el-button>
      </div>
      </el-col>
    </el-row>

    <!-- 警告栏 -->
     <el-alert
    type="info"
    show-icon
     :closable="false">
     <template slot="title">
<span>
    数据一共{{data.counts}}条
</span>
    </template>
  </el-alert>

  <!-- 目录表格 -->
     <el-table
      :data="tagsform"
      style="width: 100%">
      <el-table-column
       type="index"
        label="序号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="所属学科"
       >
      </el-table-column>
      <el-table-column
        prop="tagName"
        label="标签名称">
      </el-table-column>
       <el-table-column
        prop="username"
        label="创建者">
      </el-table-column>
       <el-table-column
        prop="addDate"
        label="创建日期">
      </el-table-column>

       <el-table-column
        prop="state"
        label="状态">
      </el-table-column>

       <!-- 操作 -->
      <el-table-column label="操作" width="250px">
      <template slot-scope="scope">

       <el-button @click="isdisableRow (scope.row)" type="text" size="small">{{scope.row.state==='已禁用'?'启用':'禁用'}}</el-button>
       <el-button @click="updateRow(scope.row)" type="text" size="small" :disabled="!scope.row.isdisable" >修改</el-button>
       <el-button @click="deleteRow(scope.row)" type="text" size="small" disabled >删除</el-button>

      </template>
    </el-table-column>
    </el-table>

     <!-- 分页器 -->
     <el-row type="flex" justify="end" >
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"

      :page-sizes="[5, 10, 20, 50]"
      :page-size="data.pagesize"
      :current-page="data.page"

       layout=" prev, pager, next, sizes, jumper"
      :total="data.counts">
    </el-pagination>
    </el-row>

    <!-- 新增/更新标签弹窗 -->
    <el-dialog :title="isupdate?'修改标签':'新增标签'" :visible.sync="dialogVisible" >
    <TagsForm ref="tagsformlist" v-if="dialogVisible" :subjects="subjects" @close="closefn" :isupdate="isupdate" :getsubjectlist="getsubjectlist" :tagrow="tagrow"/>
    </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/tags'
import { crtTimeFtt } from '@/filters'// 处理时间
import TagsForm from './tagsForm.vue'
import { mapActions } from 'vuex'

export default {
  created () {
    this.gettagslist()
    // 获取所有学科目录
    this.getsubjectlist()
  },
  data () {
    return {
      // 头部搜索表单数据
      dataform: {
        tagName: '', // 标签名称
        state: '' // 状态,

      },
      // 头部下拉
      options: [{
        value: 0,
        label: '禁用'
      }, {
        value: 1,
        label: '启用'
      }],
      // 标签表格数据
      tagsform: [{
        subjectName: '', // 学科名称
        subjectID: '', // 学科id
        tagName: '',
        username: '11',
        addDate: '',
        state: '',

        isdisable: false,
        id: ''// 标签id

      }],
      data: {
        page: 1, // 当前页
        pagesize: 10, // 当前尺寸
        counts: 10, // 总共多少条,
        subjectID: null // 学科id
      },
      //   // 返回按钮是否显示
      //   btnshow: this.$route.query.id && this.route.query.name,
      // 修改用户状态的数据
      changestate: {
        id: '', // 标签的id
        state: ''// 标签的状态
      },
      // 更新还是添加
      isupdate: false,
      // 弹框是不是显示
      dialogVisible: false,
      // 获取所有的学科目录
      subjects: this.$store.state.subjectlist.subjectData,
      // 需要修改的标签原信息
      tagrow: {
        id: '',
        subjectID: '',
        tagName: ''
      }

    }
  },
  methods: {

    ...mapActions('subjectlist', ['getsubjectlist']),
    // 返回学科列表
    btnpush () {
      this.$router.push('/subjects/list')
    },
    // 头部搜索
    async seachtags () {
      const res = await list(this.dataform)
      console.log(res.data.items)
      res.data.items.forEach(obj => { obj.addDate = crtTimeFtt(obj.addDate) })
      this.tagsform = res.data.items
      this.data.counts = res.data.counts
      // 处理state状态
      this.tagsform.forEach(obj => {
        obj.state = obj.state === 1 ? '已启用' : '已禁用'
        if (obj.state === 0) {
          // 禁用状态是false
          obj.isdisable = false
        } else {
          // 启用状态是true
          obj.isdisable = true
        }
      })
    },
    // 头部清除
    offsearch () {
      this.dataform = {
        tagName: '', // 标签名称
        state: '' // 状态,
      }
      this.gettagslist()
    },
    // 新增标签
    addtags () {
      this.isupdate = false
      this.dialogVisible = true
    },
    // 禁用/启用
    async isdisableRow (row) {
      // 改变修改按钮的状态
      row.isdisable = !row.isdisable
      // 改变state
      row.state = row.state === '已禁用' ? '已启用' : '已禁用'
      this.changestate.state = row.state === '已禁用' ? 0 : 1
      this.changestate.id = row.id
      await changeState(this.changestate)
      this.$message.success('更改标签状态成功')
    },
    // 修改
    updateRow (row) {
    //   console.log(row)
      this.isupdate = true
      this.dialogVisible = true
      this.tagrow.id = row.id
      this.tagrow.subjectID = row.subjectID
      this.tagrow.tagName = row.tagName
      this.tagrow.subjectName = row.subjectName
      console.log(this.tagrow)
    },
    // 删除
    async deleteRow (row) {
      await remove(row)
      this.$message.success('删除成功')
      this.gettagslist()
    },
    // 获取标签列表
    async gettagslist () {
    //   console.log(JSON.stringify(this.$route.query))

      if (this.$route.query.id !== null) {
        // console.log(1)
        // 跳转后进行数据查找
        this.data.subjectID = this.$route.query.id
      } else {
        // console.log(2)
        this.data.subjectID = null
      }
      const res = await list(this.data)
      this.$route.query.id = null
      // 处理时间
      res.data.items.forEach(obj => { obj.addDate = crtTimeFtt(obj.addDate) })
      // 将数据赋值给表格
      this.tagsform = res.data.items
      this.data.counts = res.data.counts

      //   console.log(res)

      // 处理state状态
      this.tagsform.forEach(obj => {
        obj.state = obj.state === 1 ? '已启用' : '已禁用'
        if (obj.state === 0) {
          // 禁用状态是false
          obj.isdisable = false
        } else {
          // 启用状态是true
          obj.isdisable = true
        }
      })
    },

    // 更改当前页码
    handleSizeChange (newpagesize) {
      this.data.pagesize = newpagesize
      this.gettagslist()
    },
    // 更改当前展示条数
    handleCurrentChange (newpage) {
      this.data.page = newpage
      this.gettagslist()
    },
    // 关闭弹框
    closefn () {
      // 关闭弹出框
      this.dialogVisible = false
      // 重新拉取标签数据
      this.gettagslist()
    }
  },
  components: {
    TagsForm
  },
  beforeRouteUpdate (to, from, next) {
    this.data.subjectID = null
    this.gettagslist()
    next()
  }

}
</script>

<style scoped></style>
